const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new  htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html' 
        }),
        new  VueLoaderPlugin()
    ],
    module:{
        rules:[
            { test:/\.css$/, use: ['style-loader', 'css-loader'] },
            { test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test:/\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
             //处理图片文件的配置
            { test:/\.(jpg|jpeg|png|gif|bmp)$/, use:'url-loader?limit=10240&name=[hash:8]-[name].[ext]&esModule=false' },
            //处理字体文件的配置
           { test:/\.(ttf|woff|woff2|eot|svg|)$/, use:'url-loader' },
           //不需要编译node_modules中的js文件，所以要排除掉
           { test:/\.js$/, use:'babel-loader', exclude: /node_modules/ },
           //处理.vue文件的loader
           { test:/\.vue$/, use:'vue-loader'}

        ]
    },
    resolve: {
         alias: { //设置vue被导入时的包的路径
            //  "vue$": "vue/dist/vue.js"
         }
    }
}